<template>
  <div class="mall-container">
    <div class="input">
      <el-input
        v-model="mallForm.id"
        placeholder="请输入订单编号"
        suffix-icon="el-icon-notebook-2"
      ></el-input>
      <el-input
        v-model="mallForm.name"
        placeholder="请输入商品名称"
        suffix-icon="el-icon-s-goods"
      ></el-input>
      <el-input
        v-model="mallForm.addr"
        placeholder="请输入收货地址"
        suffix-icon="el-icon-location"
      ></el-input>
      <el-select v-model="mallForm.type" clearable placeholder="请选择订单状态">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      <div class="block">
        &nbsp;&nbsp;&nbsp;下单日期:&nbsp;
        <el-date-picker
          v-model="date"
          value-format="yyyy-MM-dd"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="['00:00:00', '23:59:59']"
        >
        </el-date-picker>
      </div>
      <el-button type="primary" @click="onSubmit">订单查询</el-button>
      <el-button type="info" @click="onClear">重置</el-button>
    </div>
    <el-table
      :data="tableData"
      border
      style="width: 100%"
      height="560px"
      stripe
    >
      <el-table-column prop="id" label="订单号" width="180"> </el-table-column>
      <el-table-column prop="name" label="商品名称" width="180">
      </el-table-column>
      <el-table-column prop="number" label="数量"> </el-table-column>
      <el-table-column prop="money" label="订单金额(元)"> </el-table-column>
      <el-table-column prop="type" label="订单状态"> </el-table-column>
      <el-table-column prop="date" label="下单时间"> </el-table-column>
      <el-table-column prop="shop" label="下单店铺"> </el-table-column>
      <el-table-column prop="addr" label="收货地址"> </el-table-column>
      <el-table-column prop="addr" label="操作">
        <template slot-scope="scope"
          ><el-link
            icon="el-icon-delete"
            type="danger"
            @click="handleDelete(scope.row)"
            >取消订单</el-link
          ></template
        >
      </el-table-column>
    </el-table>
    <!-- 页码区域 -->
    <div class="pager">
      <el-pagination
        layout="prev, pager, next"
        :total="total"
        @current-change="handlePage"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getMall, delMall } from "../api";
export default {
  data() {
    return {
      tableData: [],
      total: 0,
      pageData: {
        page: 1,
        limit: 10,
      },
      mallForm: {
        id: "",
        name: "",
        addr: "",
        type: "",
      },
      date: ["", ""],
      options: [
        {
          value: "待付款",
          label: "待付款",
        },
        {
          value: "待发货",
          label: "待发货",
        },
        {
          value: "待收货",
          label: "待收货",
        },
        {
          value: "待评价",
          label: "待评价",
        },
        {
          value: "已评价",
          label: "已评价",
        },
      ],
    };
  },
  methods: {
    getList() {
      getMall({
        params: {
          ...this.mallForm,
          ...this.pageData,
          oldData: this.date[0],
          newData: this.date[1],
        },
      }).then(({ data }) => {
        this.tableData = data.list;
        this.total = data.count;
      });
    },
    handleDelete(row) {
      this.$confirm("此操作将会取消该订单，是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          delMall({ id: row.id }).then(() => {
            this.$message({
              type: "success",
              message: "取消订单成功!",
            });
            // 获取的列表数据
            this.getList();
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消订单失败",
          });
        });
    },
    handlePage(val) {
      this.pageData.page = val;
      this.getList();
    },
    onSubmit() {
      console.log(this.date);
      this.getList();
    },
    onClear() {
      this.mallForm = {
        id: "",
        name: "",
        addr: "",
        type: "",
      };
      this.date = ["", ""];
      this.getList();
    },
  },
  mounted() {
    this.getList();
  },
};
</script>

<style lang="less" scoped>
.mall-container {
  zoom: 85%;
  .input {
    display: flex;
    justify-content: space-between;
  }
  .el-input {
    width: 13%;
  }
  .el-select {
    width: 15%;
  }
  .el-pagination {
    float: right;
    margin-top: 30px;
  }
  .el-date-editor.el-input,
  .input[data-v-678beeda] {
    display: flex;
    margin-bottom: 20px;
  }
  .el-button--primary {
    margin-right: -10px;
  }
  .el-range-editor.el-input__inner {
    width: 75%;
  }
  /deep/.el-popper {
    margin-top: -110px;
  }
}
</style>
